<template>
  <div class="meitituiguang_fabu">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/zhiboxitong/zhiboxiaoshou' }">直播销售</el-breadcrumb-item>
            <el-breadcrumb-item>发布直播页</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="buzhou">
            <el-steps :active="1" align-center>
              <el-step title="配置商品展示页" description="主图和商品内容详情图，用于首页商品详情展示"></el-step>
              <el-step title="配置商品下单页" description="用户下单需要填写的信息及审核"></el-step>
              <el-step title="配置下单成功页" description="下单成功后提醒用户的信息"></el-step>
            </el-steps>
          </div>
          <div class="flex">
            <div class="fleft">

              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">商品名称:</div>
                <div class="r"><el-input v-model="input" placeholder="请输入页面名称"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">商品主图:</div>
                <div class="r">
                  <chuantu ref="chuantu" @getimg="getimg"></chuantu>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">商品详情页:</div>
                <div class="r">
                  <chuantu ref="chuantu" @getimg="getimg"></chuantu>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">商品价格:</div>
                <div class="r"><el-input v-model="input" placeholder="请输入页面名称"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">不发货地区:</div>
                <div class="r">
                  <el-radio v-model="radio" label="1">自定义不发货区域</el-radio>
                    <el-radio v-model="radio" label="2">使用产品的不发货区域</el-radio>
                </div>
              </div>
            </div>
            <div class="fright">
              <div class="shouji">
                  <div class="shouji_img flexcc" v-if="!all.erweima">二维码</div>
                  <div class="shouji_img" v-if="all.erweima"><img :src="all.erweima"></div>
                  <div class="shouji_qita">{{all.qita}}</div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <el-dialog title="根据已有直播页发布页面" :visible.sync="log" :close-on-click-modal="false" :close-on-press-escape="false" width="700px">
      <div class="flex">
        <el-select v-model="tongbuall" placeholder="选择已有的直播页">
         <el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取消</el-button>
        <el-button type="primary" @click="tongbugo">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import chuantu from "../components/chuantu.vue";
  export default {
    components: {
      top,left,chuantu
    },
    name: "meitituiguang_fabu",
    data() {
      return {
          list:"",
          tongbuall:"",
          log:false,
          input:"",
          all:{
            erweima:""
          },
          all2:{
            erweima:""
          },
          radio:1
          
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      getimg:function(img){
        this.all.erweima = img
      },
      getimg2:function(img){
        this.all2.erweima = img
      },
      xiayibu:function(){
        this.goid('/zhiboxitong/zhiboxiaoshou_fabu2')
      }

    }
  }
</script>

<style scoped lang="less">
  .meitituiguang_fabu {
    background: #f2f2f2; color: #333;
    min-height: 100vh;
    /deep/ .el-breadcrumb{ font-size: 16px;}
    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
      background: #eee;
    }
    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
      border-radius: 10px;
      background: #fff;
    }
    *{ box-sizing: border-box;}
    .zhiboxitong_content{
      height: calc(100vh - 70px);
      .left{width: 210px;background: #FAFAFE;height: 100%;}
      .right{ width: calc(100vw - 220px);padding: 10px;
        .zhiboxitong_right{
           height: calc(100vh - 90px); overflow: auto; background: #fff; border-radius: 5px; padding: 20px;
        }
        .fleft{
          width: 420px; padding-top: 50px;
          .ft{ font-size: 18px;margin-bottom: 30px;font-weight: bold;}
          .z{width: 120px;text-align: right;padding-right: 20px; font-size: 14px;}
          .r{}
        }
        .buzhou{ padding: 50px;}
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
</style>
